<template>
  <div class="purchase-manage">
    <div class="page-header">
      <h2>采购管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="createPurchaseOrder">
          <i class="el-icon-plus"></i> 新建采购单
        </el-button>
        <el-button type="success" @click="viewSuggestions">
          <i class="el-icon-shopping-cart-full"></i> 采购建议
        </el-button>
      </div>
    </div>

    <!-- 采购单列表 -->
    <el-table :data="purchaseOrders" style="width: 100%" border>
      <el-table-column prop="orderNo" label="采购单号" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="supplier" label="供应商"></el-table-column>
      <el-table-column prop="totalAmount" label="总金额" width="150">
        <template slot-scope="scope">
          ¥ {{ scope.row.totalAmount.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="getPurchaseStatusType(scope.row.status)">
            {{ getPurchaseStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="viewDetail(scope.row)">查看</el-button>
          <el-button type="text" @click="editOrder(scope.row)" 
            v-if="scope.row.status === 'draft'">编辑</el-button>
          <el-button type="text" class="danger-text" 
            @click="deleteOrder(scope.row)"
            v-if="scope.row.status === 'draft'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 采购单对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="orderDialogVisible" width="800px">
      <el-form :model="orderForm" :rules="orderRules" ref="orderForm" label-width="100px">
        <el-form-item label="供应商" prop="supplier">
          <el-select v-model="orderForm.supplier" filterable placeholder="请选择供应商" style="width: 100%">
            <el-option
              v-for="item in suppliers"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="采购商品">
          <div class="sku-list">
            <div v-for="(item, index) in orderForm.items" :key="index" class="sku-item">
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-select v-model="item.sku" placeholder="选择SKU" filterable>
                    <el-option
                      v-for="sku in skuOptions"
                      :key="sku.value"
                      :label="sku.label"
                      :value="sku.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-input-number v-model="item.quantity" :min="1" placeholder="数量"></el-input-number>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="item.price" placeholder="单价"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-button type="text" @click.prevent="removeItem(index)" class="danger-text">
                    删除
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-button type="text" @click="addItem">
            <i class="el-icon-plus"></i> 添加商品
          </el-button>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="orderForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="orderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOrder">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 采购建议对话框 -->
    <el-dialog title="采购建议" :visible.sync="suggestionDialogVisible" width="700px">
      <el-table :data="purchaseSuggestions" style="width: 100%">
        <el-table-column prop="sku" label="SKU" width="120"></el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="currentStock" label="当前库存" width="100"></el-table-column>
        <el-table-column prop="suggestedQuantity" label="建议采购" width="100"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="addToOrder(scope.row)">
              添加到采购单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PurchaseManage',
  data() {
    return {
      purchaseOrders: [], // 采购单列表
      orderDialogVisible: false,
      suggestionDialogVisible: false,
      dialogTitle: '新建采购单',
      orderForm: {
        supplier: '',
        items: [],
        remark: ''
      },
      suppliers: [
        { label: '供应商A', value: 'supplierA' },
        { label: '供应商B', value: 'supplierB' }
      ],
      skuOptions: [
        { label: 'SKU001', value: 'SKU001' },
        { label: 'SKU002', value: 'SKU002' }
      ],
      purchaseSuggestions: [], // 采购建议列表
      orderRules: {
        supplier: [
          { required: true, message: '请选择供应商', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.fetchPurchaseOrders()
  },
  methods: {
    fetchPurchaseOrders() {
      // 模拟获取采购单列表
      setTimeout(() => {
        this.purchaseOrders = [
          {
            orderNo: 'PO202401001',
            createTime: '2024-01-10 10:00',
            supplier: '供应商A',
            totalAmount: 5000.00,
            status: 'pending'
          }
        ]
      }, 300)
    },
    getPurchaseStatusType(status) {
      const types = {
        draft: 'info',
        pending: 'warning',
        approved: 'success',
        rejected: 'danger',
        completed: ''
      }
      return types[status] || 'info'
    },
    getPurchaseStatusText(status) {
      const texts = {
        draft: '草稿',
        pending: '待审核',
        approved: '已审核',
        rejected: '已拒绝',
        completed: '已完成'
      }
      return texts[status] || '未知'
    },
    createPurchaseOrder() {
      this.dialogTitle = '新建采购单'
      this.orderForm = {
        supplier: '',
        items: [{ sku: '', quantity: 1, price: '' }],
        remark: ''
      }
      this.orderDialogVisible = true
    },
    addItem() {
      this.orderForm.items.push({
        sku: '',
        quantity: 1,
        price: ''
      })
    },
    removeItem(index) {
      this.orderForm.items.splice(index, 1)
    },
    submitOrder() {
      this.$refs.orderForm.validate((valid) => {
        if (valid) {
          // 模拟提交
          setTimeout(() => {
            this.$message.success('保存成功')
            this.orderDialogVisible = false
            this.fetchPurchaseOrders()
          }, 300)
        }
      })
    },
    viewSuggestions() {
      // 模拟获取采购建议
      setTimeout(() => {
        this.purchaseSuggestions = [
          {
            sku: 'SKU001',
            name: '商品1',
            currentStock: 5,
            suggestedQuantity: 20
          },
          {
            sku: 'SKU002',
            name: '商品2',
            currentStock: 3,
            suggestedQuantity: 15
          }
        ]
        this.suggestionDialogVisible = true
      }, 300)
    },
    addToOrder(suggestion) {
      // 添加到新采购单
      this.createPurchaseOrder()
      this.orderForm.items[0].sku = suggestion.sku
      this.orderForm.items[0].quantity = suggestion.suggestedQuantity
    },
    viewDetail(row) {
      this.$message.info('查看采购单详情: ' + row.orderNo)
    },
    editOrder(row) {
      this.dialogTitle = '编辑采购单'
      this.orderForm = { ...row }
      this.orderDialogVisible = true
    },
    deleteOrder(row) {
      this.$confirm('确认删除该采购单吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.fetchPurchaseOrders()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.purchase-manage {
  padding: 20px;

  .sku-list {
    margin-bottom: 10px;
    
    .sku-item {
      margin-bottom: 10px;
    }
  }

  .danger-text {
    color: #F56C6C;
  }
}
</style> 